<html >
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		body{background: #ada7a7;
    font-size: 20px;
    color: white;}
    body input{width:200px;height:40px;line-height:40px;background: #bdb9b9;
    font-size: 20px;
    color: white;}
    .btn_stl{width:200px;height:40px;line-height:40px;font-size:20px;}
		.win_div{width:100%;margin:50px auto ;background: #ada7a7;}
		.cont_div{width:780px;height:100%;margin:auto;background:#ada7a7;padding-top:30px;}
		.win_stl{    width: 740px;
    height: 559px;
    margin: 0 auto;
    border: 2px solid #f0f0f0;}
    table td{border-top: 2px solid #f0f0f0;
    border-left: 2px solid #f0f0f0;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    margin-right:2px;    border-radius: 5px;font-size:60px;text-align: center;}
    table td:hover{
    	background:#b7b2b3;
    }
    .img_stl{position: initial;
         margin-left: 45%;
    margin-bottom: 15px;
     background-image: url(img/face.png);
     background-repeat: no-repeat;
     width: 47px;
     height: 47px;
     background-size: 200px;
     background-position: 8px 5px;
         border: 2px solid #f0f0f0;
         padding:16px 29px;
         margin-right: 30px;
    }    
	</style>
</head>
<body>
<h2>扫雷游戏</h2>
<div>
	行数：<input type="text" id="rowNum" name="rowNum"/>
	列数：<input type="text" id="colNum" name="rowNum"/>
	地雷数：<input type="text" id="gostNum" name="gostNum"/>
	<button class="btn_stl" onclick="start();">开  始</button>
</div>
<div class="win_div">
	<div ><i class="img_stl"></i>剩余数量：<span class="surplusNum" id="surplusNum"></span></div>
	<div class="cont_div">
		<div class="win_stl" id="wind">
			<table width="100%" height="100%">
			<tbody id="tab_id">
				
			</tbody>
			</table>
		</div>
	</div>
</div>
<script type="text/javascript" src="jquery/jq3/jquery.min.js"></script>
<script type="text/javascript">
var aar;
var rowNum = 0;
var colNum = 0;
var initNum = 0;
var gostNum = 0;
var surplusNum = 0;//剩余
var gameStsCd = true;
var sucessFlag = true;
var colorArr = ['#54293b','#5375a0','#0972f7','#be09f7','#f76309','#09dff7','#f7096a'];
function start(){
	if(gameStsCd){
		rowNum = $("#rowNum").val();
		colNum = $("#colNum").val();
		gostNum = $("#gostNum").val();
		$("#surplusNum").text(gostNum);
		surplusNum = gostNum;
		initNum = gostNum;
		gameStsCd = false;
		initWin(rowNum,colNum);
		aar = randNum();		
	}
}

$(function(){
	$("body").on('mousedown', '.tb_td', function(e){
	   var n = $(this).attr('attr_ck');
	   var row = $(this).attr('attr_row');
	   var col = $(this).attr('attr_col');
	   var vn = aar[row][col];
	   if(3 == e.which && !gameStsCd){ 
		   if(n == 0){
			   $(this).attr('attr_ck','2');
			   $(this).css({'background':'#f0f0ff'});   
			   surplusNum --;
			   $("#surplusNum").text(surplusNum);
			   success();
		   }else if(n == 1){
			   return false;
		   }else if(n == 2){
			   $(this).attr('attr_ck','0');
			   $(this).css({'background':'none'}); 
			   surplusNum ++;
			   $("#surplusNum").text(surplusNum);
		   }		     
       }else if(1 == e.which && !gameStsCd){ 
    	   if(n == 0){
			   if(vn == "*"){
				   sucessFlag = false;
				   gameStsCd = true;
				   gameOver();
			   }else{
	    		   $(this).attr('attr_ck','1');
				   var num2 = randomNum(colorArr.length);
				   var co = colorArr[num2];
				   $(this).css({'background':'#f0f0f0','color':co}); 
				   $(this).html(vn);	
				   success();
				   $(".img_stl").css({'background-position': '-45px 6px'});
			   }
		   }else{
			   return false;
		   }    	  
       } 
	});
	$("body").bind("contextmenu", function () {
	   
	    return false;
	});
	$("body").on('mouseup', '.tb_td', function(e){
		if(3 == e.which){ 
			
		}else if(1 == e.which){
			if(sucessFlag){
				$(".img_stl").css({'background-position': '8px 5px'});
			}else{
				
			}
		}
	});
});
function success(){
	var flag = true;
	$(".tb_td").each(function(){		
		var gstr = $(this).attr('attr_ck');		
		if(gstr == 0){
			flag = false;
		}
	})
	if(flag){
		ifEnd();
	}
}
function ifEnd(){
	var n = 0;
	$(".tb_td").each(function(){
		var row = $(this).attr('attr_row');
		var col = $(this).attr('attr_col');
		var gstr = $(this).attr('attr_ck');
		var vn = aar[row][col];		
		if(gstr == 2 && vn == '*'){
			n++;
		}
	})
	if(n == initNum){
		gameStsCd = true;
		alert("成功");
	}
}
function gameOver(){
	$(".tb_td").each(function(){
		var row = $(this).attr('attr_row');
		var col = $(this).attr('attr_col');
		var vn = aar[row][col];
		$(this).attr('attr_ck','1');
	    var num2 = randomNum(colorArr.length);
		var co = colorArr[num2];
		$(this).css({'background':'#f0f0f0','color':co}); 
		$(this).html(vn);
	});
	$(".img_stl").css({'background-position': '8px -98px'});
}
function initWin(){
	$(".img_stl").css({'background-position': '8px 5px'});
	var width = 730;
	var height = 540;
	var w = width /colNum;
	var h = height / rowNum;
	var html = "";	
	for(var i=0;i<rowNum;i++){
		html += "<tr>";
		for(var j=0;j<colNum;j++){
			html += '<td class="tb_td" attr_ck="0" attr_row="'+i+'" attr_col="'+j+'" style="width:'+w+'px;height:'+h+'px;"></td>';
			//html += '<div class="tb_td" attr_ck="0" attr_row="'+i+'" attr_col="'+j+'"></div>';
		}
		html += "</tr>";
	}
	$("#tab_id").html(html);
	//$("#wind").html(html);
}
function randNum() {
	var str = new Array();	
	for(var i=0;i<rowNum;i++) {
		str[i] = new Array();
		for(var j=0;j<colNum;j++) {
			str[i][j] = "0";
		}
	}
	var num = 0;
	while(num<gostNum) {
		num ++;
		var num1 = randomNum(rowNum);
		var num2 = randomNum(colNum);
		if("*" == str[num1][num2]) {
			num --;
		}else {
			str[num1][num2] = "*";
		}
	}
	return rectNum(str);
}
function rectNum(str) {
	for(var i=0;i<rowNum;i++) {
		for(var j=0;j<colNum;j++) {
			if(!"*" == str[i][j]) {
				var num = getNum(i,j,str);
				str[i][j] = ""+num;
			}			
		}	
	}
	return str;
}
function getNum(num1 , num2,str) {
	var num =0;
	var minnum = [[-1,-1],[-1,0],[-1,1],[0,1],[1,1],[1,0],[1,-1],[0,-1]];
	for(var k=0;k<8;k++){
		var aa = num1+minnum[k][0];
		var bb = num2+minnum[k][1];
		if(aa>=0 && aa<rowNum && bb >= 0 && bb<colNum){
			if(str[aa][bb] == "*")
				{num++;}
		}
	}
	return num ;	
}

function randomNum(num) {	
	var rn = Math.floor(Math.random()*num);
	return rn;//随机生成0~4中间的数字 
	
}
</script>
</body>
</html>
